<template>
  <div>
    <!-- 轮播图组件 -->
    <GetImg />
    <section>
      <!-- 手机专区 start-->
      <h2>手机</h2>

      <div class="phone">
        <img src="http://106.15.179.105:3000/public/imgs/phone/phone.png" alt="" />
        <!-- 单个商品组件 -->
        <Good :ProductData="ProductData" @fadect="fadect"></Good>
      </div>
      <!-- 手机专区 end -->

      <!-- 家电专区 start-->

      <h2>
        <p>家电专区</p>
        <p>
          <small ref="acpOne" @mouseover="bigOne">热门</small>
          <small ref="acpTow" @mouseover="bigTow">电视影音</small>
        </p>
      </h2>

      <div class="applianceOne">
        <div class="leftOne">
          <img
            src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo1.png"
          />
          <img
            src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo2.png"
          />
        </div>

        <Good :ProductData="Wiring" @fadect="fadect"></Good>
      </div>
      <!-- 家电专区 end -->

      <!-- 配件专区 start-->
      <h2>
        <p>配件</p>
        <p>
          <small ref="HotStyTow" @mouseover="HotSty">热门</small>
          <small ref="IpadStyTow" @mouseover="IpadSty">保护套</small>
          <small ref="ChargerStyTow" @mouseover="ChargerSty">充电器</small>
        </p>
      </h2>
      <div class="applianceTow">
        <div class="leftTow">
          <img
            src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo1.png"
          />
          <img
            src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo2.png"
          />
        </div>
        <Good :ProductData="partsData" @fadect="fadect"></Good>
      </div>

      <!-- 配件专区 end -->
    </section>
  </div>
</template>

<script>
import GetImg from "@/components/General/SlideShow.vue";
import PhoneAPI from "@/api/PageAPI/HomeAPI.js";
export default {
  components: { GetImg },
  data() {
    return {
      ProductData: [],
      Wiring: [],
      partsData: [],
    };
  },
  created() {
    // 数据请求
    this.PhoneData();
    this.Electrical();
    this.ty();
    this.hot();
    this.guard();
    this.charge();
  },
  mounted() {
    // 基础样式渲染
    this.bigOne();
    this.HotSty();
    this.IpadSty();
    this.ChargerSty();
  },
  methods: {
    // 请求手机数据
    async PhoneData() {
      const res = await PhoneAPI.PhoneData({ categoryName: ["手机"] });
      // console.log(res);
      this.ProductData = res.Product;
    },
    // 请求电器数据
    async Electrical() {
      // console.log(res);
      const res = await PhoneAPI.getHot({ categoryName: ["电视机", "空调", "洗衣机"] });
      this.Wiring = res.Product;
    },
    // 请求电视影视数据
    async ty() {
      const res = await PhoneAPI.PhoneData({ categoryName: ["电视机"] });
      this.Wiring = res.Product;
    },
    // 请求配件热门
    async hot() {
      const res = await PhoneAPI.getHot({
        categoryName: ["保护套", "保护膜", "充电器", "充电宝"],
      });
      this.partsData = res.Product;
    },
    // 请求保护套
    async guard() {
      const res = await PhoneAPI.getHot({
        categoryName: ["保护套"],
      });
      this.partsData = res.Product;
    },
    // 请求充电器

    async charge() {
      const res = await PhoneAPI.getHot({
        categoryName: ["充电器"],
      });
      this.partsData = res.Product;
    },

    // 子组件事件
    fadect(id) {
      // console.log(id);
      // 获取到当前商品的id后路由传参
      this.$router.push(`/details/${id}`);
    },
  
    // 家电
    bigOne() {
      // 热门样式改变
      let One = this.$refs.acpOne;
      let Tow = this.$refs.acpTow;
      Tow.style = "";
      One.style.color = "orangered";
      One.style.cursor = "pointer";
      One.style.borderBottom = "2px solid orangered";
      this.Electrical(); //当触发热门时调用数据
    },
    bigTow() {
      // 电视影视样式改变
      let Tow = this.$refs.acpTow;
      let One = this.$refs.acpOne;
      One.style = "";
      Tow.style.color = "orangered";
      Tow.style.cursor = "pointer";
      Tow.style.borderBottom = "2px solid orangered";
      // 当触发到电视影音时调用接口渲染组件数据
      this.ty();
    },
    // 配件
    // 热门样式
    HotSty() {
      let HotTow = this.$refs.HotStyTow;
      HotTow.style.color = "orangered";
      HotTow.style.cursor = "pointer";
      HotTow.style.borderBottom = "2px solid orangered";
      // 清空其他样式
      let IpadTow = this.$refs.IpadStyTow;
      let ChargerTow = this.$refs.ChargerStyTow;
      IpadTow.style = "";
      ChargerTow.style = "";
      this.hot();
    },
    // 保护套样式
    IpadSty() {
      let IpadTow = this.$refs.IpadStyTow;
      IpadTow.style.color = "orangered";
      IpadTow.style.cursor = "pointer";
      IpadTow.style.borderBottom = "2px solid orangered";
      // 清空其他样式
      let HotTow = this.$refs.HotStyTow;
      let ChargerTow = this.$refs.ChargerStyTow;
      HotTow.style = "";
      ChargerTow.style = "";
      this.guard();
    },
    // 充电器样式
    ChargerSty() {
      let ChargerTow = this.$refs.ChargerStyTow;
      ChargerTow.style.color = "orangered";
      ChargerTow.style.cursor = "pointer";
      ChargerTow.style.borderBottom = "2px solid orangered";
      // // 清空其他样式
      let HotTow = this.$refs.HotStyTow;
      let IpadTow = this.$refs.IpadStyTow;
      HotTow.style = "";
      IpadTow.style = "";
      this.charge();
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
section {
  background: #f5f5f5;
  padding: 0 40px 20px 40px;
  margin-bottom: 20px;
  h2 {
    font-weight: 400;
    padding: 15px 0;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    small {
      margin-left: 20px;
    }
  }
  .phone {
    display: flex;
  }
  .applianceOne {
    display: flex;
    height: 703px;
    .leftOne {
      img:nth-child(1) {
        margin-bottom: 20px;
      }
      img {
        height: 340px;
        transition: all 0.5;
      }
      img:hover {
        box-shadow: 0 5px 10px 3px #ccc;
        margin-top: -3px;
      }
    }
  }

  .applianceTow {
    display: flex;
    height: 703px;
    .leftTow {
      img:nth-child(1) {
        margin-bottom: 20px;
      }
      img {
        height: 340px;
        transition: all 0.5;
      }
      img:hover {
        box-shadow: 0 5px 10px 3px #ccc;
        margin-top: -3px;
      }
    }
  }
}
</style>
